<template>
  <el-scrollbar>
    <div>
      <el-backtop :right="100" :bottom="200" :visibility-height="10" />
      <!-- 搜索 -->
      <el-space wrap style="margin-bottom:10px">
        <span>角色名称 :</span>
        <el-input v-model="name" placeholder="请输入角色名称" clearable />
        <span>描述信息 :</span>
        <el-input v-model="desc" clearable />
        <el-button type="primary" :icon="Search" @click="adminLog">查找</el-button>
      </el-space>
      <!-- 列表 -->
      <el-table :data="tableData" style="width: 60%" border>
        <el-table-column prop="name" label="角色名称" align="center" />
        <el-table-column prop="desc" label="说明" align="center" />
        <el-table-column align="center" label="操作" width="180">
          <template #default="scope">
            <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button type="primary" @click="handlePermission(scope.row)">授权</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 修改弹框 -->
      <el-dialog v-model="dialogFormVisible" title="修改信息">
        <el-form :model="form">
          <el-form-item label="角色名称 :">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="描述信息 :">
            <el-input v-model="form.desc" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="fangdou">修改</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 授权弹框 -->
      <el-dialog v-model="dialogFormVisibletree" title="授权信息">
        <el-tree
          :data="permissionList"
          show-checkbox
          ref="tree"
          node-key="id"
          :props="defaultProps"
        >
          <!-- :default-checked-keys="checkedkeys" -->
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span>{{data.api?data.id:''}}</span>
            </span>
          </template>
        </el-tree>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisibletree = false">取消</el-button>
            <el-button type="primary" @click="conFirm">确定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 分页 -->
      <dome v-bind="domes" @limits="limits" @pages="pages" />
    </div>
  </el-scrollbar>
</template>
<script>
import { post } from "@/util/http";
import dome from "@/components/DomeAndTop.vue";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { debounce } from "@/fangdou/fangdou";//防抖
export default {
  components: {
    dome,
  },
  data() {
    return {
      Search,
      formLabelWidth: 100,
      // 列表
      tableData: [],
      // 分页
      domes: {
        limit: 10,
        page: 1,
        total: 10,
      },
      // 修改弹框表单数据
      form: {
        name: "",
        desc: "",
        id: "",
      },
      dialogFormVisible: false, //修改弹框布尔值
      dialogFormVisibletree: false, //授权弹框布尔值
      permissionList: [], //授权弹框数据
      defaultProps: {
        value: "id",
        children: "children",
        label: "label",
      },
      nodekey: "",
      checkedkeys: "", //default-checked-keys 设置默认展开和默认选中的节点。
      // 搜索描述信息的v-model值
      desc: "",
      // 搜索角色名称的v-model值
      name: "",
    };
  },
  created() {
    this.adminLog();
  },
  methods: {
    treelist(data) {
      console.log(data, "当前类目数据");
    },
    // 确认修改
    subMit() {
      let data = {
        _gp: "admin.role",
        _mt: "update",
        role: JSON.stringify(this.form),
      };
      post(data).then((res) => {
        console.log(res);
        if (200 == res.data.errno) {
          this.dialogFormVisible = false;
          ElMessage.success("修改成功");
        } else {
          ElMessage.warning(res.data.errmsg);
        }
        this.adminLog();
      });
    },
    fangdou: debounce(function () {
      this.subMit();
    }),
    // 修改
    handleEdit(index, e) {
      this.form.id = e.id;
      this.dialogFormVisible = true;
    },
    // 确认授权
    conFirm() {
      const rule_ids = this.$refs.tree.getCheckedKeys();
      let data = {
        _gp: "admin.role",
        _mt: "permissionSet",
        roleSetPermissionDTO: JSON.stringify({
          permissions: rule_ids,
          roleId: this.nodekey,
        }),
      };
      post(data).then((res) => {
        if (200 == res.data.errno) {
          console.log(res, "授权成功");
          this.permissionList = [];
          this.dialogFormVisibletree = false;
          this.adminLog();
          ElMessage.success("授权成功");
        } else {
          ElMessage.warning(res.data.errmsg);
        }
        this.adminLog();
      });
    },
    // 授权
    handlePermission(e) {
      console.log(e, "授权");
      this.permissionList = [];
      this.nodekey = e.id;
      this.dialogFormVisibletree = true;
      let data = {
        _gp: "admin.role",
        _mt: "permissionList",
        roleId: e.id,
      };
      post(data).then((res) => {
        if (200 == res.data.errno) {
          this.permissionList = res.data.data.systemPermissions;
          this.$refs.tree.setCheckedKeys(res.data.data.assignedPermissions);
          // this.checkedkeys = res.data.data.assignedPermissions;
          console.log(res, "需要的授权");
        } else {
          ElMessage.warning(res.data.errmsg);
        }
        this.adminLog();
      });
    },
    sbuSearch() {
      this.adminLog();
    },
    // 角色列表
    adminLog() {
      let logdata = {
        _gp: "admin.role",
        _mt: "list",
        name: this.name,
        desc: this.desc,
        page: this.domes.page,
        limit: this.domes.limit,
      };
      post(logdata)
        .then((res) => {
          if (200 == res.data.errno) {
            this.tableData = res.data.data.items;
            this.domes.total = res.data.data.total;
          }
        })
        .catch((err) => {
          ElMessage.error(err.data.errmsg);
        });
    },
    limits(e) {
      this.domes.limit = e;
      this.$nextTick(() => {
        this.adminLog();
      });
    },
    pages(e) {
      this.domes.page = e;
      this.$nextTick(() => {
        this.adminLog();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>